<script setup lang="ts">
import type { CustomDialogInstance } from '@/types'
import type { FormRules, FormInstance } from 'element-plus'

import type { EmissionFactorBody } from '@/api/modules/emissionFactors'

import { carbonEmissionFactorApi } from '@/api'

defineOptions({ name: 'OperateModal' })

const emits = defineEmits<{
  (e: 'saveSuccess'): void
}>()
const info = defineModel<Partial<EmissionFactorBody>>({ required: true })
const selectEnergy = ref<any[]>([])
const dialogRef = ref<CustomDialogInstance>()
const formRef = ref<FormInstance>()
const rules: FormRules = reactive({
  energyName: [{ required: true, message: '请选择能源品种' }],
  energyCode: [{ required: true, message: '请选择能源品种' }],
  startTime: [{ required: true, message: '请选择起始日期' }],
  emissionFactors: [{ required: true, message: '请输入排放因子' }],
})

watch(
  () => info.value.energyCode,
  (val) => {
    if (val) {
      info.value.energyName = selectEnergy.value.find((item: any) => item.value === val)?.label
      info.value.unit = selectEnergy.value.find((item: any) => item.value === val)?.unit
    }
    else {
      info.value.energyName = ''
      info.value.unit = ''
    }
  },
  { immediate: true },
)
async function clickSave(done: () => void) {
  const isValid = await formRef.value?.validate().catch(() => {
    done()
  })
  if (isValid) {
    const params = unref(info)
    try {
      await carbonEmissionFactorApi.saveOrUpdate({ ...params } as EmissionFactorBody)
      ElMessage.success('保存成功')
      done()
      close()
      emits('saveSuccess')
    }
    catch (e) {
      done()
    }
  }
}

async function open() {
  selectEnergy.value = await getSelectEnergy()
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

async function getSelectEnergy() {
  const { data } = await carbonEmissionFactorApi.getList()
  const selectEnergy = data.map((item: any) => {
    return {
      label: item.energyName,
      value: item.code,
      unit: item.unit,
    }
  })
  return selectEnergy
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="排放因子信息"
    need-saving
    width="600px"
    @confirm="clickSave"
  >
    <ElForm ref="formRef" class="px-6" :model="info" :rules="rules" label-width="90px">
      <ElFormItem label="能源品种" prop="energyCode">
        <ElSelect v-model="info.energyCode" class="w-auto" filterable placeholder="请选择能源品种">
          <ElOption v-for="item in selectEnergy" :key="item.value" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="起始日期" prop="startTime">
        <ElDatePicker v-model="info.startTime" type="date" placeholder="请选择起始日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
      </ElFormItem>
      <ElFormItem label="排放因子" prop="emissionFactors">
        <ElInputNumber v-model="(info.emissionFactors as number)" class="!w-60" placeholder="请输入排放因子" />
      </ElFormItem>
      <ElFormItem label="单位" prop="unit">
        <ElInput v-model="info.unit" disabled />
      </ElFormItem>
    </ElForm>
    <div class="h-30px" />
  </CustomDialog>
</template>
